<template>
  <!-- 头部导航 -->
  <el-header class="header-wrapper">
    <div class="header-content">
      <!-- 左侧部分 - 折叠/展开按钮和标题 -->
      <div class="header-left">
        <i
          :class="sidebarCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          @click="handleToggleSidebar"
          style="font-size: 20px; cursor: pointer"
        ></i>
        <div class="logo-title">
          <h2 class="system-title">{{ pageTitle }}</h2>
        </div>
      </div>

      <!-- 右侧部分 - 搜索、通知和用户信息 -->
      <div class="header-right">
        <!-- 用户信息下拉菜单 -->
        <el-dropdown trigger="click" class="user-dropdown">
          <div class="user-info">
            <img :src="userAvatar" class="user-avatar" alt="用户头像" />
            <span class="user-name">{{ currentUserName }}</span>
            <el-tag
              size="small"
              :type="userInfo.role === 'admin' ? 'danger' : 'primary'"
            >
              {{ currentUserRole }}
            </el-tag>
            <i class="el-icon-arrow-down user-arrow"></i>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-menu">
            <el-dropdown-item
              v-if="userInfo.role === 'user'"
              @click.native="handleProfile"
            >
              <i class="el-icon-user"></i> 个人资料
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="handleLogout">
              <i class="el-icon-switch-button"></i> 退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<script>
import { logout } from '@/api/login.js'

export default {
  name: 'HeaderView',
  props: {
    sidebarCollapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 可以在这里添加响应式数据
    }
  },
  computed: {
    pageTitle() {
      // 从当前路由的meta中获取标题，如果没有则使用默认标题
      return this.$route.meta.title || '图书管理系统'
    },
    // 获取完整用户信息对象
    userInfo() {
      try {
        const userInfoStr = localStorage.getItem('userInfo')
        if (userInfoStr) {
          return JSON.parse(userInfoStr)
        }
        return null
      } catch (error) {
        console.error('解析用户信息失败:', error)
        return null
      }
    },
    // 获取当前用户名称
    currentUserName() {
      if (!this.userInfo) {
        return '未知用户'
      }
      // 优先使用用户名称，其次使用用户名
      return this.userInfo.name || this.userInfo.username || '未知用户'
    },
    // 获取当前用户角色
    currentUserRole() {
      if (!this.userInfo) {
        return '未知角色'
      }
      return this.userInfo.role === 'admin' ? '管理员' : '普通用户'
    },
    // 获取用户头像
    userAvatar() {
      if (!this.userInfo) {
        return null
      }
      return (
        this.userInfo.avatar ||
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      )
    }
  },
  methods: {
    // 处理侧边栏折叠/展开
    handleToggleSidebar() {
      this.$emit('toggle-sidebar')
    },
    // 处理个人资料
    handleProfile() {
      // 根据用户角色跳转到对应的个人资料页面
      if (this.userInfo && this.userInfo.role === 'admin') {
        this.$router.push('/admin/profile')
      } else {
        this.$router.push('/user/profile')
      }
    },
    // 处理退出登录
    async handleLogout() {
      // 弹窗提示
      try {
        await this.$confirm('确定退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 调用退出登录接口
        const res = await logout()

        // 只清除用户信息，保留其他可能的配置
        localStorage.removeItem('userInfo')
        this.$router.push('/login')
        this.$message.success(res.msg || '退出登录成功')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped>
/* 头部导航整体样式 */
.header-wrapper {
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 0;
  z-index: 100;
}

/* 头部内容容器 */
.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* 左侧部分样式 */
.header-left {
  display: flex;
  align-items: center;
}

/* 侧边栏折叠按钮样式 */
.sidebar-toggle-btn {
  background-color: #ffffff;
  border-color: #dcdfe6;
  color: #606266;
  margin-right: 10px;
  height: 36px;
  width: 36px;
}

.sidebar-toggle-btn:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
  color: #409eff;
}

/* Logo和标题样式 */
.logo-title {
  display: flex;
  align-items: center;
}

.logo-image {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.system-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin-left: 15px;
}

/* 中间部分样式 */
.header-center {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

/* 面包屑样式 */
.breadcrumb {
  font-size: 14px;
}

/* 右侧部分样式 */
.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 搜索框样式 */
.search-input {
  width: 200px;
}

.search-input /deep/ .el-input__inner {
  border-radius: 4px;
  height: 32px;
}

/* 通知图标按钮样式 */
.notification-btn {
  background-color: #ffffff;
  border-color: #dcdfe6;
  color: #606266;
  height: 32px;
  width: 32px;
}

.notification-btn:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
  color: #409eff;
}

/* 工具栏样式 */
.toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
}

.toolbar-btn {
  background-color: #ffffff;
  border-color: #dcdfe6;
  color: #606266;
}

.toolbar-btn:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
  color: #409eff;
}

/* 用户信息下拉菜单样式 */
.user-dropdown {
  cursor: pointer;
}

.user-dropdown:hover .user-info {
  background-color: #f5f7fa;
  border-radius: 4px;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
  border: 2px solid #f0f0f0;
  transition: border-color 0.3s ease;
}

.user-dropdown:hover .user-avatar {
  border-color: #409eff;
}

.user-name {
  font-size: 14px;
  color: #303133;
  margin-right: 8px;
  font-weight: 500;
}

.user-arrow {
  font-size: 12px;
  color: #c0c4cc;
  margin-left: 4px;
  transition: transform 0.3s ease;
}

.user-dropdown:hover .user-arrow {
  transform: rotate(180deg);
}

/* 用户下拉菜单样式 */
.user-menu {
  width: 150px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.user-menu .el-dropdown-item {
  font-size: 14px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.user-menu .el-dropdown-item:hover {
  background-color: #ecf5ff;
  color: #409eff;
}

.user-menu .el-dropdown-item i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-input {
    display: none;
  }

  .user-name {
    display: none;
  }

  .user-info {
    padding: 4px;
  }

  .user-avatar {
    margin-right: 0;
  }
}
</style>
